<template name="addSkin">
<view class="bgzd">
	<view class="form">
		<view class="form_top">
			<text>添加皮肤分析记录</text>
			<image @click="close" src="/static/img/none_close.png"></image>
		</view>
		<view class="title">皮肤类型:</view>
		<checkbox-group @change="bindSkin" class="list">
			<label v-for="(item,index) in skinName" :key="item.name">
				<checkbox :value="item.name" :checked="item.checked"/>
				<view>{{item.name}}</view>
			</label>
		</checkbox-group>
		<view class="title">备注:</view>
		<textarea class="text_remark" auto-height maxlength="-1" v-model="remark"/>
		<button v-if="addTrue" @click="add" class="buttonClass">添加</button>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	name: "addSkin",
	//属性
	props:['id'],
	data() {
		return {
			addTrue:true,
			skinName:[],
			remark:'',
			skinNameArr:[]
		}
	},
	//组件生命周期
	created:function(e){
		this.getSkin()
	},
	methods:{
		getSkin:function(){
			var that = this
			request({
				url: 'oa/skin/getSkinName',
				method: 'get',
				success: (res) => {
					that.skinName = res.data.data
				},
			})
		},
		close:function(){
			this.$emit('func',{'type':0,'model':'addSkinShow'})
		},
		bindSkin:function(e){
			this.skinNameArr = e.detail.value
		},
		add:function(){
			if(!this.skinNameArr.length){
				uni.showToast({
					title: '请选择皮肤类型!!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			var data = {
				skinNameStr:this.skinNameArr,
				oa_id:uni.getStorageSync('oa_id'),
				customer_id:this.id,
				staff_uid:uni.getStorageSync('uid'),
				remark:this.remark
			}
			var that = this
			this.addTrue = false
			request({
				url: 'oa/skin/addList',
				method: 'post',
				data:data,
				success: (res) => {
					if(res.data.code == 1){
						uni.showToast({
							title: '添加成功!!',
							icon: "none", 
							position:'bottom',
						});
						that.$emit('func',{'type':1,'model':'addSkinShow'})
					}else{
						uni.showToast({
							title:res.data.msg,
							icon: "none", 
							position:'bottom',
						});
					}
				},
			})
		},
	}
}
</script>
<style>
.bgzd{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	z-index:999;
}
.form{
	width:100%;
	height:100%;
    padding-top:50rpx;
    padding-left:2%;
    bottom:0;
    background:#d9d9d9;
    z-index:9999;
}
.form_top{
	width:95%;
    font-weight:bold;
    font-size:20px;
    display: flex;
    flex-direction: row;
    align-items: center;
	height:80rpx;
	line-height: 80rpx;
    justify-content: space-between;
}
.form_top image{
    width:35rpx;height:35rpx;
    margin-right: 20rpx;
}
.list{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top:20rpx;
}
.list label{
	display:flex;
	flex-direction: row;
	height:70rpx;
	line-height: 70rpx;
	margin-right:20rpx;
}
.title{
	font-size:18px;margin-top:20rpx;
}
.text_remark{
	margin-top:20rpx;
	width:92%;
	height:150rpx !important;
	border:1px dashed #000000;
	padding:15rpx;
}
</style>